@mainColor: #2F95A1;

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	background: #0F2A33 ;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1100px;
	justify-content: center;
	margin: 10px auto;

	.item.flip-card {
		background-color: transparent;
		width: 228px;
		height: 228px;
		perspective: 1000px;
		margin: 0 6px 12px 6px;
		filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));

		&:hover .flip-card-inner {
			transform: rotateY(180deg);
		}

		.flip-card-inner {
			position: relative;
			width: 100%;
			height: 100%;
			text-align: center;
			transition: transform 0.8s;
			transform-style: preserve-3d;
		}

		.flip-img,
		.flip-text {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			backface-visibility: hidden;
		}

		.flip-img {
			background-color: #fff;
			border: 1px solid @mainColor;
			color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			
			padding: 2px;

			.img-flex {
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				width: 100%;
				height: 100%;
			}
		}

		.flip-text {
			background-color: @mainColor;
			color: white;
			transform: rotateY(180deg);
			font-family: 'Caramel', cursive;
			font-size: 32px;
			align-items: flex-end;
    		justify-content: flex-end;
			
			padding: 10px 25px;
			z-index: 10;
		}
	}
}
